const PropTypes = require('prop-types');
const React = require('react');
const {
  Component
} = React;
const {
  View,
  ListView,
  StyleSheet
} = require('react-native');
const {
  JDPopupWindow,
  JDTouchable,
  JDText,
  JDDevice,
} = require('@areslabs/jdreact-core-lib');

const PICKER_ITEM_HEIGHT = JDDevice.getRpx(60);

class JDPicker extends Component {
  static propTypes = {
    selectedIndex: PropTypes.number,
    dataSource: PropTypes.array,
    show: PropTypes.bool,
    onClose: PropTypes.func,
    onSelect: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      tempSelectedIndex: props.selectedIndex || 0,
    };
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  }

  render() {
    return (
      <JDPopupWindow show={this.props.show} onHide={this.props.onClose}>
        <View style={styles.wrapper}>
          <View style={styles.header}>
            <JDTouchable onPress={this.props.onClose}>
              <JDText style={styles.headerBtnText}>取消</JDText>
            </JDTouchable>
            <JDTouchable onPress={this.onSelect}>
              <JDText style={styles.headerBtnText}>取消</JDText>
            </JDTouchable>
          </View>
          <View style={styles.body}>
            <ListView
              style={styles.scrollView}
              contentContainerStyle={styles.scrollViewContent}
              bounces={false}
              showsVerticalScrollIndicator={false}
              onScroll={this.onScroll}
              dataSource={this.ds.cloneWithRows(this.getComputedRows())}
              renderRow={(...args) => (this.renderRow(...args))}
            />
            <View style={styles.selectedRowWrapper} />
          </View>
        </View>
      </JDPopupWindow>
    );
  }

  getComputedRows() {
    let dataSource = this.props.dataSource;
    let tempSelectedIndex = this.state.tempSelectedIndex;
    let displaySource = [
      ...dataSource.slice(tempSelectedIndex - 3, tempSelectedIndex),
      dataSource[tempSelectedIndex],
      ...dataSource.slice(tempSelectedIndex + 1, tempSelectedIndex + 4),
    ];
    if (tempSelectedIndex < 3) {
      displaySource = dataSource.slice(0, 3).concat(displaySource);
    }
    if (tempSelectedIndex > dataSource.length - 3) {
      displaySource = displaySource.concat(dataSource.slice(dataSource.length - 3));
    }
    return displaySource;
  }

  renderRow(rowData, sectionID, rowID) {
    let {tempSelectedIndex} = this.state;
    return (
      <View style={[styles.row, rowID ==  tempSelectedIndex && styles.selectedRow]}>
        <JDText style={[styles.rowText, rowID ==  tempSelectedIndex && styles.selectedRow]}>{rowData.label}</JDText>
      </View>
    )
  }

  onSelect() {

  }

  onScroll({nativeEvent}) {
    let y = nativeEvent.contentOffset.y;
    let part = y % PICKER_ITEM_HEIGHT;
    // if(Math.abs(part) )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: '#FFF',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: JDDevice.getRpx(75),
    backgroundColor: '#E5E5E5',
    paddingHorizontal: JDDevice.getRpx(40)
  },
  headerBtnText: {
    color: '#00F'
  },

  body: {
    backgroundColor: 'rgba(0,0,0,0.01)',
  },
  row: {
    height: PICKER_ITEM_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
  selectedRowWrapper: {
    borderColor: '#999',
    borderTopWidth: JDDevice.getDpx(1),
    borderBottomWidth: JDDevice.getDpx(1),
    position: 'absolute',
    left: 0,
    right: 0,
    top: PICKER_ITEM_HEIGHT * 3,
    height: PICKER_ITEM_HEIGHT,
  },
  scrollView: {
    zIndex: 1
  },
  scrollViewContent: {
    backgroundColor: 'transparent',
    maxHeight: PICKER_ITEM_HEIGHT * 7,
  }
})

module.exports = JDPicker;